<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Touch Scroll Demo</title>
<style>
  body {
    height: 2000px; /* 设置一个较长的页面以便滚动 */
  }
</style>
</head>
<body>

<div id="content">
  <!-- 页面内容 -->
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit....</p>
</div>

<script>
// 获取需要滚动的容器元素
var content = document.getElementById('content');

// 定义变量来保存手指触摸时的初始位置和滑动距离
var startY = 0;
var moveY = 0;

// 监听 touchstart 事件，记录手指触摸时的初始位置
content.addEventListener('touchstart', function(event) {
  startY = event.touches[0].clientY;
});

// 监听 touchmove 事件，计算手指滑动的距离并实现页面滚动
content.addEventListener('touchmove', function(event) {
  // 阻止默认的滚动行为
  event.preventDefault();
  // 计算手指滑动的距离
  moveY = event.touches[0].clientY - startY;
  // 实现页面滚动
  content.scrollTop -= moveY;
  // 更新初始位置
  startY = event.touches[0].clientY;
});

// 监听 touchend 事件，重置滑动距离
content.addEventListener('touchend', function() {
  moveY = 0;
});
</script>

</body>
</html>
